<!--添加诊断组件-->
<script setup lang="ts">
import { DiagnosisData } from "@/interface/doctorStation.ts";
import { VXETable, VxeGridInstance, VxeGridProps, VxeGridListeners } from 'vxe-table'

defineOptions({
  name: 'AddDiagnose'
})

// 当前选择的行数据
const currentRow = ref<DiagnosisData | null>(null)

// 表格操作按钮禁用状态
const isDisabled = computed(() => !currentRow.value)

const xGrid = ref<VxeGridInstance<DiagnosisData>>()

const gridOptions = reactive<VxeGridProps<DiagnosisData>>({
  size: 'mini',
  border: true,
  keepSource: true,
  showOverflow: true,
  height: 100,
  loading: false,
  columnConfig: {
    resizable: true
  },
  pagerConfig: {
    enabled: false,
    total: 0,
    currentPage: 1,
    pageSize: 10,
    pageSizes: [10, 20, 50, 100, 200, 500]
  },
  editConfig: {
    trigger: 'click',
    mode: 'row',
    showStatus: true
  },
  columns: [
    // { type: 'seq', width: 60 },
    { type: 'checkbox', width: 50 },
    { field: 'diagnosisName', title: '西医诊断名称', editRender: { autofocus: '.vxe-input--inner' }, slots: { edit: 'diagnosisName_edit' } },
    { field: 'nationalClinicalCoding', title: '国临编码', editRender: { autofocus: '.vxe-input--inner' }, slots: { edit: 'nationalClinicalCoding_edit' } },
    { field: 'mainDiseaseTCM', title: '中医主病', editRender: {}, slots: { edit: 'mainDiseaseTCM_edit' } },
    { field: 'mainDiseaseCode', title: '主病编码', editRender: {}, slots: { edit: 'mainDiseaseCode_edit' } },
    { field: 'mainSyndromeTCM', title: '中医主证', showOverflow: true, editRender: {}, slots: { edit: 'mainSyndromeTCM_edit' } },
    { field: 'mainCertificateCode', title: '主证编码', showOverflow: true, editRender: {}, slots: { edit: 'mainCertificateCode_edit' } },
    // { title: '操作', width: 300, slots: { default: 'operate' } }
  ],
  data: []
})

const findList = () => {
  gridOptions.loading = true
  setTimeout(() => {
    gridOptions.loading = false
    if (gridOptions.pagerConfig) {
      gridOptions.pagerConfig.total = 10
    }
    gridOptions.data = [
      {
        diagnosisName: "上呼吸道感染",
        nationalClinicalCoding: "XTH567",
        mainDiseaseTCM: "湿热证",
        mainDiseaseCode: "SHZ123",
        mainSyndromeTCM: "热毒",
        mainCertificateCode: "RD789",
      }
      // {
      //   diagnosisName: "高血压",
      //   nationalClinicalCoding: "HBP567",
      //   mainDiseaseTCM: "肝火上炎",
      //   mainDiseaseCode: "GHSY123",
      //   mainSyndromeTCM: "肝阳上亢",
      //   mainCertificateCode: "GYSK789",
      // },
      // {
      //   diagnosisName: "2型糖尿病",
      //   nationalClinicalCoding: "DMT2",
      //   mainDiseaseTCM: "糖尿病证",
      //   mainDiseaseCode: "TNSB123",
      //   mainSyndromeTCM: "气滞血瘀",
      //   mainCertificateCode: "QZXY789",
      // }
    ]
  }, 300)
}

const gridEvents: VxeGridListeners<DiagnosisData> = {
  pageChange ({ currentPage, pageSize }) {
    if (gridOptions.pagerConfig) {
      gridOptions.pagerConfig.currentPage = currentPage
      gridOptions.pagerConfig.pageSize = pageSize
    }
    findList()
  }
}

const hasActiveEditRow = (row: DiagnosisData) => {
  const $grid = xGrid.value
  if ($grid) {
    return $grid.isEditByRow(row)
  }
  return false
}

const editRowEvent = (row: DiagnosisData) => {
  const $grid = xGrid.value
  if ($grid) {
    $grid.setEditRow(row)
  }
}

const clearRowEvent = () => {
  const $grid = xGrid.value
  if ($grid) {
    $grid.clearEdit()
  }
}

const saveRowEvent = async (row: DiagnosisData) => {
  const $grid = xGrid.value
  if ($grid) {
    await $grid.clearEdit()
    gridOptions.loading = true
    // 模拟异步保存
    setTimeout(() => {
      gridOptions.loading = false
      VXETable.modal.message({ content: `${JSON.stringify(row)}`, status: 'success' })
    }, 300)
  }
}

const removeRowEvent = async (row: DiagnosisData) => {
  const type = await VXETable.modal.confirm('您确定要删除该数据?')
  const $grid = xGrid.value
  if ($grid) {
    if (type === 'confirm') {
      await $grid.remove(row)
    }
  }
}

const lastDiagnosis = () => {
  console.log('上次诊断');
}

// 添加诊断
const addDiagnosis = async () => {
  const $table = xGrid.value
  if ($table) {
    const record = {}
    const { row: newRow } = await $table.insert(record)
    await $table.setEditCell(newRow, 'diagnosisName')
  }
}

const delDiagnosis = () => {

}

findList()

</script>

<template>
<div class="addDiagnose">
  <div class="flex ac pt5 pb5">
    <span class="f12" style="width: 60px">病人诊断</span>
    <el-button plain size="small" type="primary" @clic="lastDiagnosis">上次诊断</el-button>
    <el-button plain size="small" type="primary" @click="addDiagnosis">添加</el-button>
    <el-button plain size="small" type="danger" @click="delDiagnosis" :disabled="isDisabled">删除</el-button>
  </div>
  <vxe-grid ref="xGrid" v-bind="gridOptions" v-on="gridEvents">
    <template #operate="{ row }">
      <template v-if="hasActiveEditRow(row)">
        <vxe-button content="取消" @click="clearRowEvent"></vxe-button>
        <vxe-button status="primary" content="保存" @click="saveRowEvent(row)"></vxe-button>
      </template>
      <template v-else>
        <vxe-button content="编辑" @click="editRowEvent(row)"></vxe-button>
      </template>
      <vxe-button status="danger" content="删除" @click="removeRowEvent(row)"></vxe-button>
    </template>

    <template #diagnosisName_edit="{ row }">
      <el-input v-model="row.diagnosisName"></el-input>
    </template>
    <template #nationalClinicalCoding_edit="{ row }">
      <el-input v-model="row.nationalClinicalCoding" disabled></el-input>
    </template>
    <template #mainDiseaseTCM_edit="{ row }">
      <el-input v-model="row.mainDiseaseTCM"></el-input>
    </template>
    <template #mainDiseaseCode_edit="{ row }">
      <el-input v-model="row.mainDiseaseCode" disabled></el-input>
    </template>
    <template #mainSyndromeTCM_edit="{ row }">
      <el-input v-model="row.mainSyndromeTCM"></el-input>
    </template>
    <template #mainCertificateCode_edit="{ row }">
      <el-input v-model="row.mainCertificateCode" disabled></el-input>
    </template>
  </vxe-grid>
</div>
</template>

<style scoped lang="scss">

</style>
